<script setup>
import { nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { getForumArticleDetailService } from '@/api/forumArticle';
import { useRouter, useRoute } from 'vue-router'
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import { useMdV3CatalogStore } from '@/store/mdV3Catalog';
// mdV3目录Store
const mdV3CatalogStore = useMdV3CatalogStore()

const router = useRouter()
const route = useRoute()

// 接收父组件传递过来的文章信息
let props = defineProps({
  forumArticle: {
    type: Object,
    default: {},
  },
  previewTheme: {
    type: String,
    default: 'default',
  },
  codeTheme: {
    type: String,
    default: 'atom',
  }
})

// onMounted(() => {
//   const contentDom = document.querySelector("#article-area-preview")
//   console.log("组件内，所有内容", contentDom)
//   console.log("组件内，所有子节点", contentDom.children)
//   mdV3CatalogStore.setMdV3Catalog(contentDom.children)
// })

// 声明要触发的父组件中的事件
const emit = defineEmits(['parentGetArticleCatalog']);
onMounted(() => {
  const contentDom = document.querySelector("#article-area-preview");
  if (!contentDom) return; // 确保元素存在

  const observer = new MutationObserver((mutations) => {
    const children = Array.from(contentDom.children);
    // console.log("666子元素列表:", children);
    // mdV3CatalogStore.setMdV3Catalog(children)
    emit('parentGetArticleCatalog', children); // 触发父组件事件并传递参数
    observer.disconnect(); // 如果只需要第一次变化，可以立即断开
  });

  observer.observe(contentDom, { childList: true });

  // 组件卸载时停止监听
  onUnmounted(() => {
    observer.disconnect();
  });
});

</script>

<template>
  <!-- 文章内容 -->
  <div class="article-content">
    <!-- 文章标题 -->
    <h1 class="article-title">{{ forumArticle.title }}</h1>
    <!-- 文章作者信息 -->
    <div class="author-info">
      <span class="author-name" @click="router.push(`/userCenter/${forumArticle.userId}`)">
        {{ forumArticle.nickname }}
      </span>
      <span class="article-post-time">{{ forumArticle.postTime }}</span>
      <span class="iconfont icon-eye"></span>
      <span>{{ forumArticle.readCount }}</span>
    </div>
    <!-- 文章具体内容 -->
    <!-- <div class="article-area" id="article-area" v-html="forumArticle.content"></div> -->
    <MdPreview id="article-area" :model-value="forumArticle.markdownContent" :previewTheme="previewTheme"
      :codeTheme="codeTheme">
    </MdPreview>
  </div>
</template>

<style>
/* 文章内容 */
.article-content {
  background-color: #fff;
  padding: 40px;
  border-radius: 4px 4px 0 0;
  min-height: 200px;
}

/* 文章标题 */
.article-title {
  font-weight: 600;
  color: #252933;
  margin-bottom: 16px;
}

/* 文章作者信息 */
.author-info {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  background: #f8f8f8;
  border-radius: 4px;
  padding: 20px;
}

.author-info span {
  color: #8a919f;
  font-size: 14px;
}

.author-info .author-name {
  font-size: 14px;
  font-weight: 400;
  color: #515767;
  cursor: pointer;
  margin-right: 15px;
}

.author-info .author-name:hover {
  color: #67C23A;
}

.author-info .article-post-time {
  margin-right: 15px;
}

.author-info .icon-eye {
  margin-right: 5px;
}

/* 文章具体内容 */
.article-content .article-area img {
  max-width: 95%;
  cursor: pointer;
}

/* 我们可以自己修改文章内容样式 */
.article-content .article-area p {
  line-height: 1.75;
  margin-top: 22px;
  margin-bottom: 22px;
}
</style>